<template>
    <KeepAlive>
        <component :is="com"></component>
    </KeepAlive>
    <button @click="tab">切换按钮</button>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import ComponentA from './ComponentA.vue'
// import ComponentB from './ComponentB.vue'
const ComponentB = defineAsyncComponent(()=>
    import("./ComponentB.vue")
)
export default{
    data(){
        return{
            com:"ComponentA"
        }
    },
    components:{
        ComponentA,
        ComponentB
    },
    methods:{
        tab(){
            console.log(this.com);
            this.com = this.com == "ComponentA"? "ComponentB":"ComponentA"
        }
    }
}
</script>